<template>
  <div class="app-container">
    <part-comp title="消息列表" class="mb_15"/>
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="formbox whitebg mb_15">
        <el-form-item label="" prop="status">
            <el-select v-model="queryParams.status" size="small" clearable placeholder="全部" @change="handleQuery" style="width:200px">
                <el-option
                    v-for="dict in statusList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="primary" size="mini" @click="handleSend">发消息</el-button>
            <el-button type="danger" size="mini" :disabled='multiple' @click="handleDeteleAll">删除</el-button>
            <el-button type="success" size="mini" :disabled='multiple' @click="handleStatus">标为已读</el-button>
        </el-form-item>
    </el-form>
    <div class="tablebox whitebg">
        <el-table v-loading="listLoading"
            :data="list"
            @selection-change="handleSelectionChange"
            class="whitetable">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" prop="id" width="100">
                <template slot-scope="scope">
                    <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="发送人" prop="user_login" >
                <template slot-scope="scope">
                    <span class="">{{scope.row.user.user_login}}</span>
                </template>
            </el-table-column>
            <el-table-column label="发送时间" prop="user_login" >
                <template slot-scope="scope">
                    <span class="">{{scope.row.create_time}}</span>
                </template>
            </el-table-column>
            <el-table-column label="标题">
                <template slot-scope="scope">
                    <span class="">{{scope.row.title}}</span>
                </template>
            </el-table-column>
            <el-table-column label="消息内容">
                <template slot-scope="scope">
                    <span class="">{{scope.row.msg}}</span>
                </template>
            </el-table-column>
            <el-table-column label="回复状态">
                <template slot-scope="scope">
                    <span >{{ scope.row.status_name}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="操作" fixed="right" width="160">
                <template slot-scope="scope">
                    <div class="flex btnflex">
                        <div v-if="user.u_id!==scope.row.u_id" class="commhover btn_textblue mb_10" @click="handleReplay(scope.row,2)">回复</div>
                        <span v-if="user.u_id!==scope.row.u_id" class="line">|</span>
                        <div class="commhover btn_textblue mb_10" @click="handleDetail(scope.row)">查看</div>
                        <span class="line">|</span>
                        <div class="commhover btn_textred mb_10" @click="handleDetele(scope.row)">删除</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.num"
            @pagination="getList"
            />
    </div>
    <el-dialog :title="type==1?'发送消息':'回复'" :close-on-click-modal='false' :visible.sync="msgdialog" width="620px" append-to-body>
        <msg-dialog v-if="msgdialog" :msgtype='type' :rowinfo='rowinfo' @close='handleClosemsg' />
    </el-dialog>
    
  </div>
</template>

<script>
import PartComp from '@/components/PartComp';
import MsgDialog from './components/MsgDialog.vue'
import { getmsgList,deleteMsg,deleteMsgAll,readtext } from '@/api/message'
import { levelList,levelName } from '@/api/datalist';
import { mapState } from 'vuex';
export default {
    components:{
        PartComp,
        MsgDialog,
    },
    data(){
        return {
            queryParams:{
                page:1,
                num:10,
                type:'',
                user_login:''
            },
            listLoading:false,
            list:[],
            total:0,
            statusList:[{name:'未读',id:0},{name:'已读',id:1},{name:'已回复',id:5}],//{name:'删除',id:9}
            rowids:[],
            multiple:true,
            msgdialog:false,
            type:1,
            rowinfo:null,
        }
    },

    created(){
        console.log('user:',this.user);
        this.getList();
    },

    computed: {
        ...mapState({
            user: state => state.user.user,
        }),
        levelName(){
            return levelName
        },
    },

    methods:{

        getList(){
            this.listLoading=true;
            let params = {
                page:this.queryParams.page,
                num:this.queryParams.num,
            }
            // if(this.queryParams.user_login){
            //     params.user_login = this.queryParams.user_login
            // }
            if(this.queryParams.status||this.queryParams.status==0){
                params.status = this.queryParams.status
            }
            getmsgList(params).then(res=>{
                this.listLoading=false;
                this.list = res.data.list;
                this.total = res.data.count;
            }).catch(()=>{
                this.listLoading=false;
            })
        },

        handleQuery(){
            this.queryParams.page = 1;
            this.getList();
        },

        handleSelectionChange(rows){
            this.rowids = rows.map((item) => item.id);
            this.multiple = !rows.length
        },

        resetQuery(){
            this.resetForm("queryForm");
            this.queryParams.status='';
            this.handleQuery();
        },

        handleSend(){
            this.type=1;
            this.msgdialog = true
        },

        handleReplay(row,type){
            this.rowinfo=row;
            this.type=type;
            this.msgdialog = true
        },

        handleClosemsg(type){
            if(type==1){
                this.getList();
            }
            this.msgdialog = false
        },
        
        // 查看详情
        handleDetail(row){
            this.$router.push({name:"msglistdetail",query:{id:row.id}})
            // this.detaildialog = true;
        },


        handleCloseDetail(type){
            // if(type==1){
            //     this.getList();
            // }
            this.detaildialog = false
        },


        handleDetele(row){
            this.$confirm('确定删除该条消息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                deleteMsg({id:[row.id]}).then(res=>{
                    if(res.code == 1){
                        this.$message.success('删除成功');
                        this.getList();
                    }
                })
            }).catch(() => {});
        },


        handleDeteleAll(){
            this.$confirm('确定删除选中的消息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                deleteMsg({id:this.rowids}).then(res=>{
                    if(res.code == 1){
                        this.$message.success('删除成功');
                        this.getList();
                    }
                })
            }).catch(() => {});
        },


        handleStatus(){
            this.$confirm('确定将选中的消息全部标记为已读吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                readtext({id:this.rowids}).then(res=>{
                    if(res.code == 1){
                        this.$message.success('设置成功');
                        this.getList();
                    }
                })
            }).catch(() => {});
        }

       
    }
}
</script>

<style lang="scss" scoped>
.formbox{
    border-radius: 5px;
    padding: 15px 15px 0 15px;
    .el-form-item{
        margin-bottom: 5px;
    }
}
.primarydot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 5px;
  background-color: #1168EB;
}
.reddot{
  background-color: #E63737;
}
.btnflex{
    .line{
        display: inline-block;
        margin:0 10px;
    }
}
</style>